<template>
  <div id="window">
    <h1 class="con-right-title">
      商品货架列表编辑管理
    </h1>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addEdit('add')">
        新增商品
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column label="商品名称" width="300" prop="name" align="center">
      </el-table-column>
      <el-table-column
        label="创建人"
        width="180"
        prop="createByName"
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" width="180" align="center">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 'OPEN'"
            active-color="#1dc8a4"
            active-text="开启"
            inactive-text="关闭"
            @change="changeStatus(scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="180" prop="sort" align="center">
        <template slot-scope="scope">
          <el-input
            size="mini"
            ref="sortIpt"
            v-if="scope.$index === rowIndex"
            v-model="sort"
            style="width:55px"
            maxlength="3"
            @input="validateSort"
            @blur="editSort(scope.row)"
            @keyup.enter.native="$event.target.blur"
          ></el-input>
          <span v-else @click="toEditIpt(scope.$index, scope.row)">{{
            scope.row.sort
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        width="180"
        prop="updateByName"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作时间"
        width="180"
        prop="updatedTime"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="scope.row.status === 'CLOSE'"
            :style="{ color: scope.row.status === 'CLOSE' ? '#8B8B7A' : '' }"
            @click="pushCommodity(scope.row.id)"
          >
            推送
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.status === 'OPEN'"
            :style="{ color: scope.row.status === 'OPEN' ? '#8B8B7A' : '' }"
            @click="addEdit('edit', scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.status === 'OPEN'"
            :style="{ color: scope.row.status === 'OPEN' ? '#8B8B7A' : '' }"
            @click="delCommodity(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增配置dialog -->
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAddEdit>
  </div>
</template>

<script>
import dialogAddEdit from '@component/system/window/commodity/dialogAddEdit'
import {
  getCommodityList,
  editCommodityStatus,
  editSort,
  deleteCommodity,
  pushGoods
} from '@/api/system/window'
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogData: {
        isShow: false
      },
      sort: '',
      rowIndex: -1
    }
  },
  components: {
    dialogAddEdit
  },
  mounted() {
    let id = this.$route.query.id
    this.searchParams.saleId = id
    this.searchList()
  },
  methods: {
    // 列表
    searchList() {
      getCommodityList(this.searchParams, (res) => {
        this.total = res.total
        this.tableData = res.rows
      })
    },
    //新增编辑商品
    addEdit(title, id) {
      let saleId = this.$route.query.id
      if (title === 'add') {
        this.dialogData = { title, saleId, isShow: true }
      } else {
        this.dialogData = { title, id, saleId, isShow: true }
      }
    },
    //修改状态
    changeStatus(id) {
      editCommodityStatus({ id }, () => {
        this.$message.success('状态修改成功')
        this.searchList()
      })
    },
    //校验只能输入数字
    validateSort(val) {
      this.sort = val.replace(/[^\d]/g, '')
    },
    //点击排序
    toEditIpt(index, { sort }) {
      this.rowIndex = index
      this.$nextTick(() => {
        this.$refs.sortIpt.focus()
        this.sort = sort
      })
    },
    //失去焦点
    editSort({ id, sort }) {
      this.rowIndex = -1
      if (Number(this.sort) === sort) return
      if (!Number(this.sort)) return
      let formData = new FormData()
      formData.append('sortNum', this.sort)
      editSort(id, formData, () => {
        this.searchList()
        this.$message.success('排序修改成功')
      })
    },
    //推送商品
    pushCommodity(id) {
      pushGoods({ id }, () => {
        this.$message.success('推送成功')
        this.searchList()
      })
    },
    //删除商品
    delCommodity(id) {
      this.$confirm(`确认要删除此商品吗?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCommodity({ id }, () => {
            this.$message.success('删除成功')
            this.searchList()
          })
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    //刷新列表
    refresh() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-switch__label.is-active) {
  color: #1dc8a4;
}
</style>
